<!-- App.vue -->
<template>
  <div id="app">
    <h4>虚拟列表示例</h4>
    <!-- v-for="(item, index) in tablist" -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="vanlist">
      <VirtualList :items="items" :itemHeight="120" :itemComponent="ItemComponent">
        <template #default="{ item, index }">
          <!-- <div class="custom-item">
          {{ item.name }} - {{ index }}
        </div> -->
          <div class="tablist">
            <img v-error v-img-lazy="item.image" src="" alt="">
            <div>
              <p>{{ item.title }}</p>
              <p class="type">
                {{ item.channel_name }}
                {{ item.date_str }}
              </p>
            </div>
          </div>
        </template>
      </VirtualList>
    </van-list>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref } from 'vue';
import VirtualList from '../../compentents/VirtualList/VirtualList.vue';

const loading = ref(false);
const finished = ref(false);
const pagecode = ref(0)

const onLoad = () => {
  pagecode.value++
  TabList()
  setTimeout(() => {
    // 加载状态结束
    loading.value = false;
  }, 1500);
};
// var items = Array.from({ length: 100 }, (v, k) => ({
//   id: k,
//   name: `Item ${k + 1}`,
// }));
var items = ref([]);
async function TabList() {
  const res = await axios.get('/static/cooperation/wap/health_news/', {
    params: {
      from_wx_mini: '1',
      page: pagecode.value,
      partner: 'chunyu_wap_mini',
      release_time: '2020-04-22%2010%3A30%3A00',
      channel_id: '0'
    }
  })
  console.log(res.data.content_list)
  // items.value = res.data.content_list
  items.value = [...items.value, ...res.data.content_list]
}
TabList()

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
};
</script>

<style lang="scss">
#app{
  height: 100vh;
}
.vanlist {
  margin-bottom: 50px;
  .tablist {
    padding: 10px 0;
    background: white;
    display: flex;
    line-height: 20px;
    border-top: 1px solid #e1e1e1;

    img {
      width: 6.25rem;
      height: 5rem;
      margin: 0.625rem;
      flex-shrink: 0;
    }

    div {
      margin: 12px 8px;
      position: relative;

      .type {
        position: absolute;
        color: #999;
        font-size: 14px;
        bottom: -10px;
      }
    }
  }
}
</style>
